<template>
    <li class="uc-order-item uc-order-item-pay">
        <div class="order-detail">
            <div class="order-summary">
                <div class="order-status">等待付款</div>
            </div>
            <table class="order-detail-table">
                <thead>
                    <tr>
                        <th class="col-main">
                            <p class="caption-info">
                                {{ getFormtTime }}
                                <span class="sep">|</span>
                                {{ userName }}
                                <span class="sep">|</span>
                                订单号：
                                <a href="#">{{ orderInfo.orderId }}</a>
                                <span class="sep">|</span>
                                在线支付
                            </p>
                        </th>
                        <th class="col-sub">
                            <p class="caption-price">
                                应付金额：
                                <span class="num">{{ Number(orderInfo.totalPrice).toFixed(2) }}</span>元
                            </p>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="order-items">
                            <ul class="goods-list">
                                <figure-thumb v-for="(item,index) in orderInfo.goodsList" :key="item.goodsId" :goodsInfo="item"></figure-thumb>
                            </ul>
                        </td>
                        <td class="order-actions">
                            <a @click="openMsgBox" class="btn btn-small btn-primary">立即付款</a>
                            <a @click="goOrderDetail" class="btn btn-small btn-line-gray">订单详情</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </li>
</template>

<script>
import FigureThumb from "@/pages/Userspace/Main/MyTrade/FigureThumb";
import QRCode from "qrcode";
export default {
    name: "item-pay",
    components: {
        FigureThumb,
    },
    props: ["orderInfo"],
    computed: {
        getFormtTime() {
            //若传入的dateTime为字符串类型，需要进行转换成数值，若不是无需下面注释代码
            //var time = parseInt(dateTime)
            var date = new Date(this.orderInfo.payTime);
            //获取年份
            var YY = date.getFullYear();
            //获取月份
            var MM =
                date.getMonth() + 1 < 10
                    ? "0" + (date.getMonth() + 1)
                    : date.getMonth() + 1;
            //获取日期
            var DD =
                date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            //flag为true，显示时分秒格式
            //获取小时
            var hh =
                date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
            //获取分
            var mm =
                date.getMinutes() < 10
                    ? "0" + date.getMinutes()
                    : date.getMinutes();
            return YY + "年" + MM + "月" + DD + "日 " + hh + ":" + mm;
        },
        userName() {
            return this.$store.getters["user/userName"];
        },
        isOutTime() {
            return Date.now() - this.orderInfo.payTime > 1800000;
        },
    },
    methods: {
        // 支付订单
        async payOrder() {
            return await Promise.resolve(
                this.$store.dispatch("pay/payOrder", this.orderInfo.orderId)
            );
        },
        async openMsgBox() {
            if (this.isOutTime) {
                this.$message.info("订单已超时");
                this.$emit("updataOrderList");
                return;
            }
            // 获取二维码的路径
            let url = await QRCode.toDataURL(
                "wxp://f2f1IZY-mr3-VuTs839ag_97WX7dfe4IrYOZbYy3Fevgpcq8dQMQUbBtUZ5dy-BzecGN"
            );
            // 通过msgbox生成二维码
            this.$msgbox
                .alert(`<img src="${url}" alt="">`, "扫码支付", {
                    dangerouslyUseHTMLString: true,
                    showCancelButton: true,
                    confirmButtonText: "我已支付",
                    cancelButtonText: "取消",
                    showClose: false,
                    center: true,
                    beforeClose: (action, instance, done) => {
                        if (action === "confirm") {
                            instance.confirmButtonLoading = true;
                            instance.confirmButtonText = "查询中...";

                            Promise.resolve(this.payOrder()).then(
                                () => {
                                    done();
                                    instance.confirmButtonLoading = false;
                                    this.$bus.$emit("updataOrderList");
                                    this.$message({
                                        message: "付款成功",
                                        type: "success",
                                    });
                                },
                                (error) => {
                                    this.$message.error(error);
                                    instance.confirmButtonLoading = false;
                                }
                            );
                        } else {
                            instance.confirmButtonLoading = false;
                            done();
                        }
                    },
                })
                .catch((action) => {
                    this.$message.info("用户取消支付");
                });
        },
        // 新开一页进入订单详情页
        goOrderDetail() {
            let newpage = this.$router.resolve({
                name: "orderdetail",
                query: {
                    orderId: this.orderInfo.orderId,
                },
            });
            window.open(newpage.href, "_blank");
        },
    },
};
</script>

<style lang="less" scoped>
.uc-order-item-pay {
    color: #333;
    list-style-type: none;
    position: relative;
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
    border-color: #ff6700;

    .order-detail {
        color: #333;
        list-style-type: none;

        .order-summary {
            color: #333;
            list-style-type: none;
            padding: 25px 30px 1px;
            background: #fffaf7;

            .order-status {
                list-style-type: none;
                font-size: 18px;
                color: #ff6700;
            }
        }

        .order-detail-table {
            color: #333;
            list-style-type: none;
            border-collapse: collapse;
            border-spacing: 0;
            width: 100%;

            thead {
                color: #333;
                list-style-type: none;
                border-collapse: collapse;
                border-spacing: 0;

                tr {
                    color: #333;
                    list-style-type: none;
                    border-collapse: collapse;
                    border-spacing: 0;

                    .col-main {
                        list-style-type: none;
                        border-collapse: collapse;
                        border-spacing: 0;
                        height: 28px;
                        padding: 0 30px 24px;
                        font-weight: 400;
                        text-align: left;
                        color: #757575;
                        vertical-align: bottom;
                        padding-right: 10px;
                        background: #fffaf7;
                        border-bottom: 1px solid #feccac;

                        p {
                            list-style-type: none;
                            border-collapse: collapse;
                            border-spacing: 0;
                            font-weight: 400;
                            text-align: left;
                            color: #757575;
                            margin: 0;

                            .sep {
                                list-style-type: none;
                                border-collapse: collapse;
                                border-spacing: 0;
                                font-weight: 400;
                                text-align: left;
                                margin: 0 0.25em;
                                font-family: sans-serif;
                                color: #e0e0e0;
                            }

                            a {
                                color: #757575;
                                text-decoration: none;
                            }
                        }
                    }

                    .col-sub {
                        list-style-type: none;
                        border-collapse: collapse;
                        border-spacing: 0;
                        height: 28px;
                        padding: 0 30px 24px;
                        font-weight: 400;
                        color: #757575;
                        vertical-align: bottom;
                        width: 240px;
                        padding-left: 10px;
                        text-align: right;
                        background: #fffaf7;
                        border-bottom: 1px solid #feccac;

                        .caption-price {
                            list-style-type: none;
                            border-collapse: collapse;
                            border-spacing: 0;
                            font-weight: 400;
                            color: #757575;
                            text-align: right;
                            margin: 0;

                            .num {
                                list-style-type: none;
                                border-collapse: collapse;
                                border-spacing: 0;
                                text-align: right;
                                height: 18px;
                                margin-right: 5px;
                                font-size: 28px;
                                font-weight: 200;
                                line-height: 1;
                                color: #333;
                            }
                        }
                    }
                }
            }

            tbody {
                color: #333;
                list-style-type: none;
                border-collapse: collapse;
                border-spacing: 0;

                tr {
                    color: #333;
                    list-style-type: none;
                    border-collapse: collapse;
                    border-spacing: 0;

                    .order-items {
                        color: #333;
                        list-style-type: none;
                        border-collapse: collapse;
                        border-spacing: 0;
                        padding: 0 30px;

                        li {
                            border-collapse: collapse;
                            border-spacing: 0;
                            list-style-type: none;
                            position: relative;
                            height: 44px;
                            margin: 10px 0;
                            padding: 18px 18px 18px 100px;
                            line-height: 22px;
                            color: #333;

                            .figure {
                                border-collapse: collapse;
                                border-spacing: 0;
                                list-style-type: none;
                                line-height: 22px;
                                color: #333;
                                position: absolute;
                                left: 0;
                                top: 0;

                                a {
                                    border-collapse: collapse;
                                    border-spacing: 0;
                                    list-style-type: none;
                                    line-height: 22px;
                                    background-color: rgba(0, 0, 0, 0);
                                    color: #757575;
                                    text-decoration: none;

                                    img {
                                        border-collapse: collapse;
                                        border-spacing: 0;
                                        list-style-type: none;
                                        line-height: 22px;
                                        color: #757575;
                                        width: 80px;
                                        aspect-ratio: auto 80 / 80;
                                        height: 80px;
                                        border: 0;
                                    }
                                }
                            }
                        }
                    }

                    .order-actions {
                        color: #333;
                        list-style-type: none;
                        border-collapse: collapse;
                        border-spacing: 0;
                        padding: 0 30px;
                        padding-top: 20px;
                        text-align: right;
                        vertical-align: top;

                        a {
                            list-style-type: none;
                            border-collapse: collapse;
                            border-spacing: 0;
                            text-decoration: none;
                            padding: 0;
                            border: 1px solid #b0b0b0;
                            text-align: center;
                            cursor: pointer;
                            transition: all 0.4s;
                            width: 118px;
                            height: 28px;
                            font-size: 12px;
                            line-height: 28px;
                            border-color: #b0b0b0;
                            background: #fff;
                            color: #757575;
                            display: block;
                            margin: 0 0 10px auto;
                        }

                        .btn-primary {
                            list-style-type: none;
                            border-collapse: collapse;
                            border-spacing: 0;
                            text-decoration: none;
                            padding: 0;
                            border: 1px solid #b0b0b0;
                            text-align: center;
                            cursor: pointer;
                            transition: all 0.4s;
                            width: 118px;
                            height: 28px;
                            font-size: 12px;
                            line-height: 28px;
                            background: #ff6700;
                            border-color: #ff6700;
                            color: #fff;
                            display: block;
                            margin: 0 0 10px auto;
                        }
                    }
                }
            }
        }
    }
}
</style>